import DomSize from 'wd-domsize-monitor';  // 此处是 npm 下载的模块包
// import Api_login from "@/assets/api/login"  // 获取用户信息

var id = 'shuiyinDiv'
// var isInit = false
let callback = function (ele) {
    DomSize.bind(ele, function () {
        //水印被删除
        DomSize.remove(ele);
        waterMark(callback)
    })

}
var waterMark = function (callback) {
    let old = document.getElementById(id)
    if (old) {
        old.remove()
    }
    function textBecomeImg(text, fontsize, fontcolor) {
        var canvas = document.createElement('canvas');
        let $buHeight = 0;
        if (fontsize <= 32) { $buHeight = 99; }
        else if (fontsize > 32 && fontsize <= 60) { $buHeight = 2; }
        else if (fontsize > 60 && fontsize <= 80) { $buHeight = 4; }
        else if (fontsize > 80 && fontsize <= 100) { $buHeight = 6; }
        else if (fontsize > 100) { $buHeight = 10; }
        canvas.height = fontsize + $buHeight;
        canvas.padding = 30;
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width * 2, canvas.height);
        context.fillStyle = fontcolor;
        context.font = fontsize + "px Arial";
        context.textAlign = "center";
        context.textBaseline = 'middle';
        context.fillText(text, 0, fontsize / 2);
        // let canvasWidth = canvas.width / 99;
        // canvasWidth = context.measureText(text).width;
        canvas.width = 250;
        canvas.height = 120;
        context.fillStyle = fontcolor;
        context.font = fontsize + "px Arial";
        context.textBaseline = 'middle';
        context.fillText(text, 0, fontsize / 2);
        var dataUrl = canvas.toDataURL('image/png');
        return dataUrl;
    }

    var createEle = function () {
        // var loginName = userInfoData.mobile ? userInfoData.mobile.substr(userInfoData.mobile.length - 4, 4) : ""
        let userInfoData = {
          name:"作者大大",
          mobilePhone:"110+120+119",
        }
        localStorage.setItem('userInfo',userInfoData)
        var text = userInfoData.name + "-" + userInfoData.mobilePhone;
        var shuiyinEle = document.createElement('div');
        shuiyinEle.id = id
        var style = shuiyinEle.style;
        style.position = 'fixed';
        style.left = '-50%';
        style.top = '-50%';
        style.width = '200%';
        style.height = '200%';
        style.opacity = '0.2';
        style.background = "url(" + textBecomeImg(text, 16, "#666666") + ")";
        style.zIndex = 9999999991;
        style.transform = "rotate(-30deg)";
        style.pointerEvents = "none";
        document.body.appendChild(shuiyinEle);
        callback(shuiyinEle)
        var target = document.getElementById(id);
        var observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
              console.log(mutation);
                observer.disconnect();
                reset()
            });
        });
        var config = { attributes: true, childList: true, characterData: true };
        observer.observe(target, config);
    }
    createEle()
}
var reset = function () {
    waterMark(callback)
}
var init = function () {
    waterMark(callback)
}

export default init;

